<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <input id="id" data-rule="" size="50" type="hidden" value="{$id}">

        <!-- <div class="col-xs-12 col-sm-4">
            <input id="money" data-rule="required" class="form-control" name="row[money]" type="number" value="">
        </div> -->
        <div class="form-group s2">
            <label for="c-avatar" class="control-label col-xs-12 col-sm-2">充值金额:</label>
            <div class="box-a">
                {foreach name="list" item="vo"}
                <div class="box-b active" data-id="{$vo['id']}">充{$vo.price}<span>送{$vo.shiji-$vo.price}</span></div>
                {/foreach}
                <div class="box-c">
                    <input id="money" class="form-control s1" name="row[money]"  data-id="0" placeholder="输入金额" type="number"
                        value="">
                </div>
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" id="btn1" class="btn btn-success btn-embossed">立即充值</button>
                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            </div>
        </div>
        <!-- <button type="" class="btn" id="btn1">保存</button> -->
    </div>
</form>

<script src="/assets/js/jquery.js"></script>
<script type="text/javascript">
    var ids=''
    $(".box-b").click(function () {
        $(this).css('border', '0.5px solid rgb(83, 111, 143)').siblings().css('border', '0.5px solid #ccc');
        ids = $(this).attr('data-id');
       layer.confirm('确定要给此用户充值吗？',
            {
                icon: 3,
                title: '温馨提示',
                yes: function (index) {
                   
                    layer.close(index);
                },
                cancel: function (index, layero) {
                    layer.close(index);
                   return false;
                }
            });
    })
    $("#btn1").click(function () {
        var cid = ids;//充值卡的id
        var money = $('#money').val();
        var id = $('#id').val();
        $.ajax({
            url: '{:url("addMoney")}',
            type: 'post',
            dataType: 'json',
            data: { 'money': money || '', 'id': id  ,'cid':cid },
            success: function (res) {
                if (res.code == 1) {
                    parent.location.reload();
                } else {
                    alert(res.msg);
                }
            }
        })

    });

 

</script>

<style lang="less">
    .box {
        font-size: 15px;
        margin-top: 30px;
        margin-left: 30px;
        border: none;
    }

    .box-a {
        width: 500px;
        height: 150px;
        margin-left: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin: 0;
    }

    .box-b,
    .box-c {
        width: 30%;
        height: 40%;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        line-height: 60px;
        color: gray;
        font-size: 15px;
    }

    .box-c {
        width: 30%;
        height: 40%;
        border: 0px solid #ccc;
        border-radius: 5px;
        text-align: center;
        line-height: 60px;
        color: gray;
        font-size: 15px;
    }

    .s1 {
        margin-top: 15px;
    }
</style>